﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    @*<link href="/Content/bootstrap.min.css" rel="stylesheet" />*@
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/Content/course.css" rel="stylesheet" />
    <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>   
    @RenderSection("Header", false)
</head>
<body>
    <nav class="navbar navbar-blue navbar-static-top">
        <div class="container">
            <div id="navbar" class="navbar-collapse collapse">
                @Html.Action("Menu", "Module")
            </div><!--/.nav-collapse -->
        </div>
    </nav>
    <div class="container modal-content">
        <div class="head-banner">
            <div class="head-banner-topic">
                <object width="672" height="322" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
                    <param value="swf/Main.swf" name="movie">
                    <param value="high" name="quality">
                    <embed width="672" height="322" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://www.klingde.com/swf/Main.swf">
                    <param value="transparent" name="wmode">
                </object>
            </div>
            <div class="head-banner-desc head-product">
                <h2>负责人介绍</h2>
                <div>
                    <img src="http://www.klingde.com/images/teacher/kld.jpg" style="float:left;padding: 10px;" />
                    <p style="text-indent:2em;font-size:14px;line-height:28px;">孔令德,博士,教授,山西省教学名师,山西省模范教师,山西省高教工委、省教育厅党组联系高级专家,太原工业学院学科带头人,中北大学外聘教授,中北大学硕士生导师,山西省高职高专计算机课程教学指导委员会副主任委员,太原市草坪区第三届和第四届政协委员。</p>
                </div>
            </div>
        </div>
        <div class="head-product duckwidth">
            <h2>精品展示</h2>
            <div class="infiniteCarousel">
                <div class="wrapper">
                    <ul>
                        <li>
                            <img alt="手机动画" src="http://www.klingde.com/images/show/phone.jpg">
                        </li>
                        <li>
                            <img alt="豹子角色动画" src="http://www.klingde.com/images/show/leopard.jpg">
                        </li>
                        <li>
                            <img alt="颜色渐变三角形" src="http://www.klingde.com/images/show/ColorGradientTriangle.jpg">
                        </li>
                        <li>
                            <img alt="交叉条" src="http://www.klingde.com/images/show/Xbracing.jpg">
                        </li>
                        <li>
                            <img alt="颜色渐变正八面体" src="http://www.klingde.com/images/show/ColorGradientOctagonal.jpg">
                        </li>
                        <li>
                            <img alt="贴图立方体" src="http://www.klingde.com/images/show/MapCube.jpg">
                        </li>
                        <li>
                            <img alt="分形树" src="http://www.klingde.com/images/show/FractalTree.jpg">
                        </li>
                        <li>
                            <img alt="单光源Gouraud模型" src="http://www.klingde.com/images/show/IlluminationBall.jpg">
                        </li>
                        <li>
                            <img alt="海绵实体模型" src="http://www.klingde.com/images/show/Sponge.jpg">
                        </li>
                        <li>
                            <img alt="光照圆环" src="http://www.klingde.com/images/show/Circle.jpg">
                        </li>
                        <li>
                            <img alt="交叉透明玻璃" src="http://www.klingde.com/images/show/TransparentGlass.jpg">
                        </li>
                        <li>
                            <img alt="三维五角星" src="http://www.klingde.com/images/show/3DFiveStar.jpg">
                        </li>
                        <li>
                            <img alt="钻石" src="http://www.klingde.com/images/show/Jewel.jpg">
                        </li>
                        <li>
                            <img alt="双光源Phong金属球" src="http://www.klingde.com/images/show/DoubleLightMetalBall.jpg">
                        </li>
                        <li>
                            <img alt="棋盘纹理贴图球" src="http://www.klingde.com/images/show/ChessBoardMapping.jpg">
                        </li>
                        <li>
                            <img alt="光照立方体" src="http://www.klingde.com/images/show/IlluminationCube.jpg">
                        </li>
                        <li>
                            <img alt="月球" src="http://www.klingde.com/images/show/Moon.jpg">
                        </li>
                        <li>
                            <img alt="反走样线框球" src="http://www.klingde.com/images/show/Anti-aliasingBall.jpg">
                        </li>
                        <li>
                            <img alt="三维地球" src="http://www.klingde.com/images/show/3DEarth.jpg">
                        </li>
                        <li>
                            <img alt="光照茶壶" src="http://www.klingde.com/images/show/Illuminationeapot.jpg">
                        </li>
                        <li>
                            <img alt="茶壶贴图" src="http://www.klingde.com/images/show/TeapotMap.jpg">
                        </li>
                        <li>
                            <img alt="三维地形" src="http://www.klingde.com/images/show/dixing.jpg">
                        </li>
                        <li>
                            <img alt="光晕、水效果的三维地形" src="http://www.klingde.com/images/show/HaloWater.jpg">
                        </li>
                        <li>
                            <img alt="圆柱纹理贴图" src="http://www.klingde.com/images/show/CylindricalTexture.jpg">
                        </li>
                        <li><img alt="圆锥纹理贴图" src="http://www.klingde.com/images/show/ConeTexture.jpg">
                    </ul>
                </div>
            </div>
        </div>


        <div class="content">
            @RenderBody()
        </div>
    </div>   
     @RenderSection("Footer", false)
    @*<script src="/Scripts/jquery-1.9.1.min.js"></script>
        <script src="/Scripts/bootstrap.min.js"></script>*@
    <script type="text/javascript">

        (function () {
            $.fn.infiniteCarousel = function () {
                function repeat(str, n) {
                    return new Array(n + 1).join(str);
                }

                return this.each(function () {
                    // magic!
                    var $wrapper = $('> div', this).css('overflow', 'hidden'),
                        $slider = $wrapper.find('> ul').width(9999),
                        $items = $slider.find('> li'),
                        $single = $items.filter(':first')

                    singleWidth = $single.outerWidth(),
                    visible = Math.ceil($wrapper.innerWidth() / singleWidth),
                    currentPage = 1,
                    pages = Math.ceil($items.length / visible);

                    /* TASKS */

                    // 1. pad the pages with empty element if required
                    if ($items.length % visible != 0) {
                        // pad
                        $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
                        $items = $slider.find('> li');
                    }

                    // 2. create the carousel padding on left and right (cloned)
                    $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned'));
                    $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
                    $items = $slider.find('> li');

                    // 3. reset scroll
                    $wrapper.scrollLeft(singleWidth * visible);

                    // 4. paging function
                    function gotoPage(page) {
                        var dir = page < currentPage ? -1 : 1,
                            n = Math.abs(currentPage - page),
                            left = singleWidth * dir * visible * n;

                        $wrapper.filter(':not(:animated)').animate({
                            scrollLeft: '+=' + left
                        }, 500, function () {
                            // if page == last page - then reset position
                            if (page > pages) {
                                $wrapper.scrollLeft(singleWidth * visible);
                                page = 1;
                            } else if (page == 0) {
                                page = pages;
                                $wrapper.scrollLeft(singleWidth * visible * pages);
                            }

                            currentPage = page;
                        });
                    }

                    // 5. insert the back and forward link
                    $wrapper.append('<a class="arrow back"></a><a class="arrow forward"></a>');

                    // 6. bind the back and forward links
                    $('a.back', this).click(function () {
                        gotoPage(currentPage - 1);
                        return false;
                    });

                    $('a.forward', this).click(function () {
                        gotoPage(currentPage + 1);
                        return false;
                    });

                    $(this).bind('goto', function (event, page) {
                        gotoPage(page);
                    });

                    // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
                    $(this).bind('next', function () {
                        gotoPage(currentPage + 1);
                    });
                });
            };
        })(jQuery);

        $(document).ready(function () {
            // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL
            var autoscrolling = true;

            $('.infiniteCarousel').infiniteCarousel().mouseover(function () {
                autoscrolling = false;
            }).mouseout(function () {
                autoscrolling = true;
            });

            setInterval(function () {
                if (autoscrolling) {
                    $('.infiniteCarousel').trigger('next');
                }
            }, 2000);
        });

    </script>
</body>
</html>